<template>
    <el-drawer :title="$t('game.data.settlement.drawer.history')" size="700px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <div class="h-full" v-loading="loading">
            <iframe ref="playback" :src="url"></iframe>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "ItemPlayback",
    props: ['visible', 'data'],
    data() {
        return {
            drawerVisible: false,
            loading: false,
            url: '',
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 显示抽屉
                this.drawerVisible = n;
                // 获取数据
                this.getData();
            } else {
                // 销毁监听
                this.$refs.playback.onload = null;
                // 销毁URL
                this.url = '';
            }
        },
    },
    methods: {
        getData() {
            this.loading = true;
            this.detail = {};
            axios.get('/game/data/settlement/getDetail', {
                params: {sn: this.data.sn}
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    // 监听加载完成
                    this.$refs.playback.onload = () => {
                        this.loading = false;
                    };
                    this.url = response.data.resp_data.url;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.loading = false;
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-drawer__wrapper ::v-deep .el-drawer__body {
    overflow: visible;
}

iframe {
    border: 0 none;
    height: calc(100vh - #{$layout-header-height});
    width: 100%;
}
</style>
